<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 可以把观察的范围扩展到这个元素的所用子节点
        */
       document.body.innerHTML = ''

       const mutationobserver = new MutationObserver((mutationRecord) => {
        console.log(mutationRecord)
       })

       document.body.appendChild(document.createElement('div'))

       mutationobserver.observe(document.body, {
        attributes: true,
        subtree: true
       })

       document.body.firstChild.setAttribute('className', 'className')

       const div = document.body.firstChild
       div.appendChild(document.createElement('p'))

       div.childNodes[0].setAttribute('className', 'class_p')

       /**
        * 已经脱离原来子树的节点仍可以被监听之前的父节点监听
       */
      
    </script>
</body>
</html>